<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>例子</title>

    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
   .left1 {
        float: left;
        /* width: 3% */
    }

    .icon1 {
        width: 40px;
        height: 39px;
        line-height: 38px;
        background-color: rgb(51, 122, 183);
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }

    .icon2 {
        width: 40px;
        height: 39px;
        line-height: 38px;
        background-color: white;
        border: 1px solid rgb(220, 220, 220);

        text-align: center;
    }

    .div1 {
        width: 40px;
        height: 60px;
        line-height: 60px;
        background-color: rgb(86, 173, 240);
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }

    .left2 {
        float: left;
        /* width: 3%; */

    }

    .div2 {
        width: 40px;
        height: 60px;
        background-color: white;
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }


    .number {
        height: 30px;
        line-height: 30px;
        color: rgb(95, 176, 241)
    }


    .div3 {
        float: right;
        width: 94% ;
        display: flex;
    }

    .div_name {
        float: left;
        height: 38px;
        line-height: 38px;
        text-align: center;
        width: 132px;
        background: -webkit-linear-gradient(white, #a8f2f5);
        box-shadow: gray;
        border: rgb(167, 164, 164) solid 0.5px;
        border-radius: 5px;

    }

    .div_1 {
        float: left;
        height: 30px;
        width: 132px;

        border-top: gray solid 0.5px;
        border-left: gray solid 0.5px;
        border-right: gray solid 0.5px;

    }

    .div_2 {
        float: left;
        height: 30px;
        width: 132px;

        border-top: rgb(240, 239, 239) solid 0.1px;
        border-left: gray solid 0.5px;
        border-right: gray solid 0.5px;
        border-bottom: gray solid 0.5px;

    }


    .create {
        z-index: 10000;
        border-radius: 5px;
        width: 130px;
        height: 25px;
        background-color: greenyellow;
        position: absolute;

    }

    .div_now1{
        background-color: rgb(135, 209, 39);
        height: 29px;
        line-height: 29px;
        width: 125px;
        border-top-right-radius: 10px; 
        border-top-left-radius: 10px; 
        border-bottom-right-radius: 10px; 
        color: white;
    }
    .div_now1>.span1{
        color: white;
        line-height: 30px;
        text-align: center;
        width: 15px;
        height: 15px;
        border: 1px solid white;
        border-radius: 2px;
        margin: 4px;

    }

    .div_now1>.span2{
        color: white;
        background-color: rgb(157, 80, 197);
        border-radius: 50%;
       margin: 15px;
    }


</style>

<body>



        <div class="left1">
                <div class="icon1"><span class="glyphicon glyphicon-dashboard"></div>
                <div class="div1">09</div>
                <div class="div1">10</div>
                <div class="div1">11</div>
                <div class="div1">12</div>
                <div class="div1">13</div>
                <div class="div1">14</div>
                <div class="div1">15</div>
                <div class="div1">16</div>
                <div class="div1">17</div>
                <div class="div1">18</div>
        
            </div>
            <div class="left2">
                <div class="icon2">
                    <sapn class="glyphicon glyphicon-user"></sapn>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
                <div class="div2">
                    <div class="number">00</div>
                    <div class="number">30</div>
                </div>
        
        
            </div>

    <div class="div3">

        <div class="div_name">李莉</div>
        <div class="div_name">唐伟</div>
        <div class="div_name">刘京沙</div>
        <div class="div_name">郎宇</div>
        <div class="div_name">冯伟</div>
        <div class="div_name">乔班</div>
        <div class="div_name">特聘专家</div>
        <div class="div_name">未指定医生</div>
        <div class="div_name">夏春蕾</div>

    </div>





  

    <div class="div3">


            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>
            <div class="div_1" style="text-align: center">正常班</div>



        <div class="div_2">
            <div class="div_now1"><span class="span1">离</span>郭展颜<span class="span2">儿</span></div>
        </div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2"></div>
        <div class="div_2">456</div>

    </div>

    <div class="div3">

        <div class="div_1" >
            <div class="create"></div>
        </div>
        <div class="div_1" ></div>
        <div class="div_1" ></div>
        <div class="div_1" >456</div>
        <div class="div_1" >456</div>
        <div class="div_1">456(2)</div>
        <div class="div_1">456</div>
        <div class="div_1">456</div>
        <div class="div_1" >456</div>




        <div class="div_2">
            <div class="create"></div>
        </div>
        <div class="div_2" ></div>
        <div class="div_2" ></div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
    </div>

    







    






    <script>


        var data_doc =["qwe","qwert","qwerty","qwertyu"];

            for(var i=0;i<data_doc.length;i++){
                var Div=document.createElement("div");
                Div.className='div_name';
                Div3=document.createElement("div")
                Div3.className="div3"

                var Div_1 =document.createElement('div');
                Div_1.className="div_1"
                var Div_2 =document.createElement('div');
                Div_2.className="div_2"
                Div3.appendChild(Div_1)
                Div3.appendChild(Div_2)

            }








        window.onload = function () {
            
            var Div_1 = document.getElementsByClassName("div_1");

            for (var i = 0; i < Div_1.length; i++) {
                Div_1[i].index = i;
                Div_1[i].onclick = function () {
                    alert(123);
                    // var j = this.index;
                    //alert("元素索引为" +this.index);
                    if (document.getElementsByClassName('div_1')[this.index].innerHTML == "") {
                                   alert(456);

                         var message = prompt("请输入你的姓名,年龄,性别,", "Your message");
                         var star = prompt("开始时间,", "starTime");
                         var end = prompt("结束时间",'endTime')
                        // var Sex = prompt("请输入你的性别,", "Your sex");
                        // var Comment = prompt("请输入你的姓名,", "Your comment");
                         timeNumber=2;

                        switch(timeNumber){
                            case 0:
                            height='30px'
                            break;
                            case 1:
                            height='60px'
                            break;
                            case 2:
                            height='90px'
                            break;
                            case 3:
                            height='120px'
                            break;
                            case 4:
                            height='150px'
                            break;

                        }
                        var element = document.createElement("div");
                        element.style.width = '130px'
                        element.style.height = height;
                        element.style.backgroundColor = 'lightgreen'
                        element.className = 'create'
                        element.borderRadius = '10px'
                        element.innerText = message;
                        document.getElementsByClassName('div_1')[this.index].appendChild(element);



                        var Div_2 = document.getElementsByClassName("create");
                        for (var i = 0; i < Div_2.length; i++) {
                            Div_2[i].index = i;
                            Div_2[i].onmouseover = function () {

                                // var j = this.index;
                               // alert("元素索引为" +this.index);

                                var dv = document.getElementsByClassName('create')[this.index];

                                var x = 0;
                                var y = 0;
                                var l = 0;
                                var t = 0;
                                var isDown = false;
                                //鼠标按下事件
                                dv.onmousedown = function (e) {
                                    //获取x坐标和y坐标
                                    x = e.clientX;
                                    y = e.clientY;

                                    //获取左部和顶部的偏移量
                                    l = dv.offsetLeft;
                                    t = dv.offsetTop;
                                    //开关打开
                                    isDown = true;
                                    //设置样式  
                                    dv.style.cursor = 'move';
                                }
                                //鼠标移动
                                window.onmousemove = function (e) {
                                    if (isDown == false) {
                                        return;
                                    }
                                    //获取x和y
                                    var nx = e.clientX;
                                    var ny = e.clientY;
                                    //计算移动后的左偏移量和顶部的偏移量
                                    var nl = nx - (x - l);
                                    var nt = ny - (y - t);

                                    dv.style.left = nl + 'px';
                                    dv.style.top = nt + 'px';
                                }
                                //鼠标抬起事件
                                Box = document.getElementsByClassName('box')[0];

                                len = dv.length;
                                dv.onmouseup = function () {
                                  
                                var dv= document.getElementsByClassName('create')[this.index];
                             
                          
                                var div_drop = document.getElementsByClassName("div_1");
                        for (var i = 0; i < div_drop.length; i++) {
                            div_drop[i].index1 = i;
                            div_drop[i].onmouseover = function () {
                                
                            }
                              
                                
                                    isDown = false;
                                    dv.style.cursor = 'default';

                                      


                                }



                            }


                        }
                    }//for
                   




                    } else {
                        return false
                    }
                }
            }
        }


                var Div_2 = document.getElementsByClassName("create");
                        for (var i = 0; i < Div_2.length; i++) {
                            Div_2[i].index = i;
                            Div_2[i].onmouseover = function () {

                                // var j = this.index;
                                //alert("元素索引为" +this.index);

                                var dv = document.getElementsByClassName('create')[this.index];

                                var x = 0;
                                var y = 0;
                                var l = 0;
                                var t = 0;
                                var isDown = false;
                                //鼠标按下事件
                                dv.onmousedown = function (e) {
                                    //获取x坐标和y坐标
                                    x = e.clientX;
                                    y = e.clientY;

                                    //获取左部和顶部的偏移量
                                    l = dv.offsetLeft;
                                    t = dv.offsetTop;
                                    //开关打开
                                    isDown = true;
                                    //设置样式  
                                    dv.style.cursor = 'move';
                                }
                                //鼠标移动
                                window.onmousemove = function (e) {
                                    if (isDown == false) {
                                        return;
                                    }
                                    //获取x和y
                                    var nx = e.clientX;
                                    var ny = e.clientY;
                                    //计算移动后的左偏移量和顶部的偏移量
                                    var nl = nx - (x - l);
                                    var nt = ny - (y - t);

                                    dv.style.left = nl + 'px';
                                    dv.style.top = nt + 'px';
                                }
                                //鼠标抬起事件
                                Box = document.getElementsByClassName('box')[0];

                                len = dv.length;
                                dv.onmouseup = function () {
                                  
                                var dv= document.getElementsByClassName('create')[this.index];
                             
                          
                                var div_drop = document.getElementsByClassName("div_1");
                        for (var i = 0; i < div_drop.length; i++) {
                            div_drop[i].index1 = i;
                            div_drop[i].onmouseover = function () {
                                
                            }
                              
                                
                                    isDown = false;
                                    dv.style.cursor = 'default';

                                      


                                }



                            }


                        }
                    }//for










        // window.onload = function () {

        //     var Submit1 = document.getElementById('submit1');

        //     Submit1.onclick = function () {
        //         var Value_ = document.getElementsByClassName("qwe")[0].value;
        //         console.log(Value_);
        //         alert("点击了");

        //     }
        // }

        // window.onload = function createwww() {

        //     alert("方法");

        //     var element = document.createElement("div");

        //     element.style.width = '130px';
        //     element.style.height = '25px'
        //     element.style.backgroundColor = 'lightgreen'
        //     element.className = 'div_creat'
        //     element.borderRadius = '10px'
        //     element.innerText = 'value'

        //     // element.appendChild(document.createTextNode(''));
        //     var Div_1 = document.getElementsByClassName("div_2");

        //     for (var i = 0; i < Div_1.length; i++) {
        //         Div_1[i].index = i;
        //         Div_1[i].onclick = function () {
        //             var j = this.index;
        //             //alert("元素索引为" +this.index);
        //             document.getElementsByClassName('div_2')[this.index].appendChild(element);
        //         }
        //     }

        //     // document.getElementsByClassName('div_1')[index_1].appendChild(element);
        // }











        // window.onload = function () {
        // 			function start(ev) {
        // 				ev.dataTransfer.setData("Text", ev.target.id); //设置数据类型为（“Text”）和ID 
        // 			}
        // 			function stop(ev) {
        // 				ev.preventDefault(); //阻止元素发生默认行为 
        // 				var id = ev.dataTransfer.getData("Text"); //获取数据类型对应的ID         
        //                 ev.target.appendChild(document.getElementsByClassName(ClassName) );
        //                 //start(ev); 
        //                 for(var i=0; i<2;i++){
        //                     start(ev);
        //                 }
        // 			}
        // 			function over(ev) {
        // 				ev.preventDefault();
        // 			}
        // 			var oBox = document.getElementsByClassName("qwe");
        // 			var oImg = document.getElementById('objee');
        // 			oImg.ondragstart = function (ev) { //要拖动的元素触发本函数 
        //                 //start(ev);  
        //                 for(var i=0; i<2;i++){
        //                     start(ev);
        //                 }
        // 			};
        // 			oBox.ondragover=function(ev){ //拖动过程中触发本函数 
        //                 //over(ev); 
        //                 for(var i=0; i<2;i++){
        //                      over(ev);
        //                 }
        // 			}; 
        // 			oBox.ondrop=function(ev){//拖动结束时触发本函数 
        //                // stop(ev); 
        //                 for(var i=0; i<2;i++){
        //                     stop(ev);
        //                 }

        //             }; 

        // 		};



        // var divs =document.getElementById("objee");

        // //元素的鼠标落下事件
        // divs.onmousedown = function(ev){

        //     //event的兼容性
        //     var ev = ev||event;

        //     //获取鼠标按下的坐标
        //     var x1 = ev.clientX;
        //     var y1 = ev.clientY;

        //     //获取元素的left，top值
        //     var l1= divs.offsetLeft;
        //     var t1 = divs.offsetTop;

        //     //给可视区域添加鼠标的移动事件
        //     document.onmousemove = function(ev){

        //         //event的兼容性
        //         var ev = ev||event;

        //         //获取鼠标移动时的坐标
        //         var x2 = ev.clientX;
        //         var y2 = ev.clientY;

        //         //计算出鼠标的移动距离
        //         var x = x2-x1;
        //         var y = y2-y1;

        //         //移动的数值与元素的left，top相加，得出元素的移动的距离
        //         var lt = y+t1;
        //         var ls = x+l1;

        //         //更改元素的left，top值
        //         divs.style.top = lt+'px';
        //         divs.style.left = ls+'px';

        //     }

        //     //清除
        //     document.onmouseup = function(ev){

        //         document.onmousemove = null;

        //     }

        // }











        // var vm = new Vue({
        //     el: '#app',


        //     data: {


        //         listname: [
        //             "李莉",
        //             "唐伟",
        //             "刘京沙",
        //             "郎宇",
        //             "冯伟",
        //             "乔班",
        //             "特聘专家",
        //             "夏春蕾",
        //             "未指定医生",


        //         ]

        //     },
        //     created() {
        //         this.get()
        //     },
        //     methods: {


        //         get() {





        //         }


        //     }
        //     ,

        //     computed: {
        //         //   'fullname' :function(){
        //         //     return this.firstname + this.nextname
        //         //   }
        //     }

        // }) 




    //     <div style="z-index:10000" class="modal fade" id="myModal" tabindex="-1" role="dialog"
    //     aria-labelledby="myModalLabel" aria-hidden="true">
    //     <div class="modal-dialog">
    //         <div class="modal-content">
    //             <div class="modal-header">
    //                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    //                     &times;
    //                 </button>
    //                 <h4 class="modal-title" id="myModalLabel">
    //                     请输入信息(message)
    //                 </h4>
    //             </div>
    //             <div class="modal-body">
    //                 姓名:<input type="text" class="qwe"><br>
    //                 年纪:<input type="text"><br>
    //                 性别:<input id="man" type="radio" checked="checked" name="1" />男<input id="woman" type="radio"
    //                     name="1" />女 <br>
    //                 备注:<input type="text">
    //             </div>
    //             <div class="modal-footer">
    //                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭
    //                 </button>
    //                 <button type="button" class="btn btn-primary">
    //                     <span id="submit1">提交</span>
    //                 </button>
    //             </div>
    //         </div>
    //     </div>
    // </div>




    </script>

    <script>
    var contanier = document.querySelector('.div3');
    contanier.addEventListener('dragstart', function (e) {
        for (let el = e.target; el != e.currentTarget; el = el.parentNode) {
            console.log(e.target)
            if (el.className.indexOf('div_1') > -1 || el.className.indexOf('div_2') > -1) {

                break;
            }
        }
    })

</script>
</body>








































<!-- 



      <div class="div3" >
            <table class="table  table-bordered table-hover" >
                    <thead>
                      <tr style="text-align: center">
                            <th  v-for="item in listname" >{{item}}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                            <td ><div class="normal_div" >正常班</div></td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                           
                      </tr>
                      <tr>
                        
                        <td>
                            <div class="td_1"   ></div>
                            <div class="td_1"></div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        
                        <td></td>
                        <td></td>

                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>

                      </tr>
                      <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            
                            <td></td>
                            <td></td>

                          </tr>
                          <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                
                                <td></td>
                                <td></td>
    
                              </tr>
                              <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    
                                    <td></td>
                                    <td></td>
        
                                  </tr>
                                  <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        
                                        <td></td>
                                        <td></td>
            
                                      </tr>
                                      <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            
                                            <td></td>
                                            <td></td>
                
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                
                                                <td></td>
                                                <td></td>
                    
                                              </tr>
                    </tbody>
                  </table>

                </div> -->